<template>
  <ElCard style="margin-bottom: 10px">
    <ElForm :inline="true">
      <ElFormItem label="一级分类">
        <ElSelect
          style="width: 150px"
          placeholder="请选择"
          :popper-options="popperOptions"
          @change="handleC1Change"
          v-model="c1Id"
          :disabled="disabled"
        >
          <el-option
            v-for="ele in catagaryOneData"
            :key="ele.id"
            :label="ele.name"
            :value="ele.id"
          ></el-option>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="二级分类">
        <ElSelect
          placeholder="请选择"
          style="width: 150px"
          v-model="c2Id"
          :popper-options="popperOptions"
          @change="handleC2Change"
          :disabled="disabled"
        >
          <el-option
            v-for="ele in catagaryTwoData"
            :key="ele.id"
            :label="ele.name"
            :value="ele.id"
          ></el-option>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="三级分类">
        <ElSelect
          placeholder="请选择"
          style="width: 150px"
          v-model="c3Id"
          :popper-options="popperOptions"
          @change="handleC3Change"
          :disabled="disabled"
        >
          <el-option
            v-for="ele in catagaryThreeData"
            :key="ele.id"
            :label="ele.name"
            :value="ele.id"
          ></el-option>
        </ElSelect>
      </ElFormItem>
    </ElForm>
  </ElCard>
</template>

<script setup lang="ts">
import { ElCard, ElForm, ElFormItem, ElSelect, ElOption } from 'element-plus'
import { ref } from 'vue'
interface Props {
  catagaryOneData: any
  catagaryTwoData?: any
  catagaryThreeData?: any
  disabled?: boolean
}
const c1Id = ref<number | string>('')
const c2Id = ref<number | string>('')
const c3Id = ref<number | string>('')

defineProps<Props>()
const $emit = defineEmits(['getCategary'])
const handleC1Change = (id: number): void => {
  c2Id.value = ''
  c3Id.value = ''
  //子传父
  $emit('getCategary', { id, level: 1 })
}
const handleC2Change = (id: number): void => {
  c3Id.value = ''
  $emit('getCategary', { id, level: 2 })
}
const handleC3Change = (): void => {
  $emit('getCategary', {
    id: {
      c1Id: c1Id.value,
      c2Id: c2Id.value,
      c3Id: c3Id.value,
    },
    level: 3,
  })
}
// 定义 popper.js 的配置项
const popperOptions = {
  modifiers: [
    {
      name: 'flip',
      enabled: false, // 核心：禁用 popper 的自动翻转功能
    },
  ],
}
</script>

<style scoped></style>
